<template>
  <div v-if="nearbyProductStore.productList.length > 0" class="container-recommend animate__animated animate__zoomIn">
    <Waterfall :list="nearbyProductStore.productList" imgSelector="image" :width="220"
      :animationEffect="'animate__zoomIn'" :animationDelay="200" :animationDuration="1000" :posDuration="800"
      infinite-scroll-immediate="false" v-infinite-scroll="loadMore" infinite-scroll-delay="2000">
      <template #default="{ item, url }">
        <div class="waterfull-card">
          <!-- 封面 -->
          <LazyImg :url="Array.isArray(url) ? url[0] : url" style="border-radius: 10px;" />

          <div class="footer">
            <!-- 标题 -->
            <div class="title"><span>{{ item.title }}</span></div>
            <!-- 价格和发货方式 -->
            <div class="price">
              <div style="display: flex; gap: 5px;align-items: baseline;">
                <span style="color: #FF3C55; font-weight: 600; font-size: 14px;">￥{{ formatPrice(item.price) }}</span>
                <span style="font-size: 10px; color: #666666; text-decoration: line-through;">
                  ￥{{ formatPrice(item.originalPrice) }}
                </span>
              </div>
              <span style="font-size: 12px;color: #666666;">{{ item.postType === 0 ? '邮寄' : '自提' }}</span>
            </div>
            <!-- 头像和想要人数 -->
            <div class="avatar-Like">
              <div class="avatar">
                <img class="avatar-img"
                  :src="item.avatar || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"
                  style="width: 25px; border-radius: 50%; outline: none;">
                <span style="margin-left: 5px; color: #666666; font-size: 12px;">{{ item.nickName }}</span>
              </div>
              <div class="like">
                <span>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shoucang"></use>
                  </svg>
                </span>
                <span style="font-size: 12px; color: #666666;">
                  {{ item.likeCount > 999 ? "999+" : item.likeCount }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </template>
    </Waterfall>
  </div>
  <!-- 空数据 -->
  <DataEmpty v-else />
  <Transition name="fade">
    <BasicInfo ref="basicInfo"></BasicInfo>
  </Transition>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import DataEmpty from '@/components/empty/DataEmpty.vue'
import BasicInfo from '@/components/basicInfo/BasicInfo.vue'
import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
import 'vue-waterfall-plugin-next/dist/style.css'
import { useNearbyProductStore, useUserStore } from '@/stores'
import { formatPrice } from '@/utils/formatDate'

// 获取 store 实例
const nearbyProductStore = useNearbyProductStore()
const areaCode = ref<string | null>('')
const basicInfo = ref<InstanceType<typeof BasicInfo> | null>(null)

// 在 onMounted 中检查并加载缓存数据
onMounted(async () => {
  // 如果store中没有数据，就加载数据
  if (nearbyProductStore.productList.length === 0) {
    // 加载数据
    const userStore = useUserStore()
    // 获取用户的省份和城市，如果用户没有选择，就弹出用户信息框
    if (!userStore.user.province || !userStore.user.city) {
      ElMessage({
        message: '请先完善位置信息',
        type: 'warning'
      })
      // 弹出用户信息框
      basicInfo.value?.show()
      return
    } else {
      const province = userStore.user.province
      const city = userStore.user.city
      const areaCode = provinceAndCityData.find(item => item.label === province)?.children?.find(item => item.label === city)?.value
      getNearbyProductList(true, areaCode!)
    }
  }
})

// 触底加载更多数据
const loadMore = () => {
  getNearbyProductList(true, areaCode.value!)
}

// 商品操作相关的数据和逻辑
import useNearbyProduct from '@/hooks/useNearbyProduct'
import { provinceAndCityData } from 'element-china-area-data'
const { getNearbyProductList } = useNearbyProduct()
</script>

<style lang="scss" scoped>
.animate__animated {
  animation-duration: 0.5s;
}

.container-recommend {
  width: 100%;

  .waterfull-card {
    transition: all .4s;

    &:hover {
      cursor: pointer;
      transform: translateY(-10px);
    }

    .footer {
      padding: 10px 0;

      .title {
        font-size: 14px;
        margin-bottom: 5px;
        font-weight: 600;
        display: block;
        padding-left: 3px;
      }

      .price {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .avatar-Like {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 5px;

        .avatar {
          display: flex;
          align-items: center;
        }

        .like {
          display: flex;
          align-items: center;

          .icon {
            width: 1em;
            height: 1em;
            fill: currentColor;
            overflow: hidden;
          }
        }
      }
    }
  }
}
</style>
